/* components */
import ChartsSearchRenXiao, { ChartsSearchRenXiaoInstance } from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/ChartsSearchRenXiao.tsx'
import ChartsSearchTask, { ChartsSearchTaskInstance } from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/ChartsSearchTask.tsx'
import ChartsSearchWuZi, { ChartsSearchWuZiInstance } from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/ChartsSearchWuZi.tsx'
import ChartsSearchYingShou, { ChartsSearchYingShouInstance } from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/ChartsSearchYingShou.tsx'
import ChartsSearchYingShouSpareParts, { ChartsSearchYingShouSparePartsInstance } from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/ChartsSearchYingShouSpareParts.tsx'
import VShowBlock from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/components/VShowBlock.tsx'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* model */
import { ChartsSearchParams } from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/ChartsSearchModel'
/* scss */
import '@src/modules/report/managementReport/charts/components/common/ChartsSearch/ChartsSearch.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, ComputedRef, defineComponent, Ref, ref } from 'vue'
import { CommonComponentInstance } from '@model/VC'
/* util */
import { cloneDeep } from '@src/util/type'
import { useChartSearchShow } from '@hooks/useChartSearch'

interface ChartsSearchSetupState {
  // 图表搜索参数变化事件
  handlerChartsSearchParamsChange: (chartSearchParams: ChartsSearchParams) => void;
  // 重置点击事件
  handlerResetClick: VoidFunction;
  // 查询点击事件
  handlerSearchClick: VoidFunction;
  // 是否为人效图表搜索
  isRenXiaoChartSearch: ComputedRef<boolean>;
  // 是否为工单图表搜索
  isTaskChartSearch: ComputedRef<boolean>;
  // 是否为物资图表搜索
  isWuZiChartSearch: ComputedRef<boolean>;
  // isYingShouChartSearch
  isYingShouChartSearch: ComputedRef<boolean>;
  // 是否是备件营收分析搜索
  isYingShouSparePartsChartSearch: ComputedRef<boolean>;
  // 人效图表组件
  ChartsSearchRenXiaoComponent: Ref<ChartsSearchRenXiaoInstance | null>;
  // 工单图表组件
  ChartsSearchTaskComponent: Ref<ChartsSearchTaskInstance | null>;
  // 物资图表搜索组件
  ChartsSearchWuZiComponent: Ref<ChartsSearchWuZiInstance | null>;
  // 物资图表搜索组件
  ChartsSearchYingShouComponent: Ref<ChartsSearchYingShouInstance | null>;
  // 备件营收分析搜索组件
  ChartsSearchYingShouSparePartsComponent: Ref<ChartsSearchYingShouSparePartsInstance | null>;
}

enum ChartsSearchEventEnum {
  Input = 'input',
  Reset = 'reset',
  Search = 'search'
}

export type ChartsSearchProps = {
  value: ChartsSearchParams;
  reportKey: string;
}
export type ChartsSearchInstance = ComponentInstance & ChartsSearchSetupState
export type ChartsSearchVM = ComponentRenderProxy<ChartsSearchProps> & CommonComponentInstance

export default defineComponent<ChartsSearchProps, ChartsSearchSetupState>({
  name: ComponentNameEnum.ChartsSearch,
  emits: [
    ChartsSearchEventEnum.Input,
    ChartsSearchEventEnum.Reset,
    ChartsSearchEventEnum.Search
  ],
  components: {
    [ComponentNameEnum.ChartsSearchRenXiao]: ChartsSearchRenXiao,
    [ComponentNameEnum.ChartsSearchTask]: ChartsSearchTask,
    [ComponentNameEnum.ChartsSearchWuZi]: ChartsSearchWuZi,
    [ComponentNameEnum.ChartsSearchYingShou]: ChartsSearchYingShou,
    [ComponentNameEnum.VShowBlock]: VShowBlock,
    [ComponentNameEnum.ChartsSearchYingShouSpareParts]: ChartsSearchYingShouSpareParts
  },
  props: {
    reportKey: {
      type: String,
      default: ''
    },
    value: {
      type: Object,
      default: () => new ChartsSearchParams()
    }
  },
  setup(props: ChartsSearchProps, { emit }) {
    
    // 人效图表搜索组件
    let ChartsSearchRenXiaoComponent: Ref<ChartsSearchRenXiaoInstance | null> = ref(null)
    // 工单图表搜索组件
    let ChartsSearchTaskComponent: Ref<ChartsSearchTaskInstance | null> = ref(null)
    // 物资图表搜索组件
    let ChartsSearchWuZiComponent: Ref<ChartsSearchWuZiInstance | null> = ref(null)
    // 物资图表搜索组件
    let ChartsSearchYingShouComponent: Ref<ChartsSearchYingShouInstance | null> = ref(null)
    // 物资图表搜索组件
    let ChartsSearchYingShouSparePartsComponent: Ref<ChartsSearchYingShouSparePartsInstance | null> = ref(null)

    const { 
      isRenXiaoChartSearch,
      isTaskChartSearch,
      isWuZiChartSearch,
      isYingShouChartSearch,
      isYingShouSparePartsChartSearch
    } = useChartSearchShow(props)
    
    // 图表搜索参数变化事件
    const handlerChartsSearchParamsChange = (chartSearchParams: ChartsSearchParams) => {
      
      emit(ChartsSearchEventEnum.Input, chartSearchParams)
    }
    
    // 重置点击事件
    const handlerResetClick = () => {
      const ChartTimePeriodSelectComponent = getChartTimePeriodSelectComponent()
      if (ChartTimePeriodSelectComponent) {
        ChartTimePeriodSelectComponent.clearError()
      }
      
      emit(ChartsSearchEventEnum.Reset)
    }
    
    // 查询点击事件
    const handlerSearchClick = () => {
      if (isPeriodDateError()) return
      
      emit(ChartsSearchEventEnum.Input, cloneDeep(props.value))
      emit(ChartsSearchEventEnum.Search)
    }
    
    /** 
     * @description 获取图表时间周期选择组件实例
    */
    function getChartTimePeriodSelectComponent() {
      try {
        if (isRenXiaoChartSearch.value && ChartsSearchRenXiaoComponent.value) {
          // @ts-ignore
          return ChartsSearchRenXiaoComponent.value.ChartTimePeriodSelectComponent.PublinkDatePeriodRangeComponent
        } else if (isTaskChartSearch.value && ChartsSearchTaskComponent.value) {
          // @ts-ignore
          return ChartsSearchTaskComponent.value.ChartTimePeriodSelectComponent.PublinkDatePeriodRangeComponent
        } else if (isWuZiChartSearch.value && ChartsSearchWuZiComponent.value) {
          // @ts-ignore
          return ChartsSearchWuZiComponent.value.ChartTimePeriodSelectComponent.PublinkDatePeriodRangeComponent
        } else if (isYingShouChartSearch.value && ChartsSearchYingShouComponent.value) {
          // @ts-ignore
          return ChartsSearchYingShouComponent.value.ChartTimePeriodSelectComponent.PublinkDatePeriodRangeComponent
        } else if (isYingShouSparePartsChartSearch.value && ChartsSearchYingShouSparePartsComponent.value) {
          // @ts-ignore
          return ChartsSearchYingShouSparePartsComponent.value.ChartTimePeriodSelectComponent.PublinkDatePeriodRangeComponent
        }
        
        return null
      } catch (error) {
        return null
      }
    }
    
    /**
     * @description 图表时间周期日期数据是否错误
     */
    function isPeriodDateError() {
      const ChartTimePeriodSelectComponent = getChartTimePeriodSelectComponent()
      if (!ChartTimePeriodSelectComponent) return false
      
      return ChartTimePeriodSelectComponent.error()
    }
    
    return {
      handlerChartsSearchParamsChange,
      handlerResetClick,
      handlerSearchClick,
      isRenXiaoChartSearch,
      isTaskChartSearch,
      isWuZiChartSearch,
      isYingShouChartSearch,
      isYingShouSparePartsChartSearch,
      ChartsSearchRenXiaoComponent,
      ChartsSearchTaskComponent,
      ChartsSearchWuZiComponent,
      ChartsSearchYingShouComponent,
      ChartsSearchYingShouSparePartsComponent
    }
  },
  render() {
    return (
      <div class="charts-search-block">
        <div class="charts-search-block-content">
          {this.isRenXiaoChartSearch && (
            <charts-search-renxiao ref="ChartsSearchRenXiaoComponent" value={this.value} onInput={this.handlerChartsSearchParamsChange} />
          )}
          {this.isTaskChartSearch && (
            <charts-search-task ref="ChartsSearchTaskComponent" value={this.value} onInput={this.handlerChartsSearchParamsChange} />
          )}
          {this.isWuZiChartSearch && (
            <charts-search-wuzi ref="ChartsSearchWuZiComponent" value={this.value} onInput={this.handlerChartsSearchParamsChange} />
          )}
          {this.isYingShouChartSearch && (
            <charts-search-yingshou ref="ChartsSearchYingShouComponent" value={this.value} onInput={this.handlerChartsSearchParamsChange} />
          )}
          {this.isYingShouSparePartsChartSearch && (
            <charts-search-yingshou-spare-parts ref="ChartsSearchYingShouSparePartsComponent" value={this.value} onInput={this.handlerChartsSearchParamsChange} />
          )}
        </div>
        <div class="charts-search-block-operator">
          <el-button type="plain-third" onClick={this.handlerResetClick}>
            重置
          </el-button>
          <el-button type='primary' onClick={this.handlerSearchClick}>
            搜索
          </el-button>
        </div>
      </div>
    )
  }
})
